<template>
    <div class="uploadPhotos">
        <!-- 退出 -->
        <img class="exitBtn" @click="clickExitBtn" src="../assets/img/exitBtnTwo.png" alt="">
        <!-- 返回上一页 -->
        <img class="exitBtnTwo" @click="clickReturn" src="../assets/img/exitBtn.png" alt="">
        <!-- 标题 -->
        <heads :types="7" class="headss"></heads>
        <div class="conlist">
            <!-- 步骤条 -->
            <div class="stepBox">
                <div class="leftStrip"></div>
                <div class="scanCodeIcon">
                    <img src="../assets/img/scanCodeIcon.png" alt="">
                    <div class="textCon FONT">1.微信扫码</div>
                </div>
                <div :class="['centerStrip',nowStep == 1 ? 'transparent' : '']"></div>
                <div class="selectIconTwo">
                    <img v-if="nowStep == 1" src="../assets/img/selectIconTwo.png" alt="">
                    <img v-else src="../assets/img/selectIcon.png" alt="">
                    <div class="textCon FONT">2.选择照片</div>
                </div>
                <div :class="['rightStrip',nowStep == 1 ? 'transparent' : '']"></div>
            </div>
            <!-- 第一步 展示手机上传二维码 -->
            <div class="codeCon" v-if="nowStep == 1">
                <!-- 扫码框 -->
                <div class="codeBox">
                    <div class="code">
                        <img v-if="qrCode" :src="qrCode" alt="">
                        <myLoading v-if="!qrCode"></myLoading>
                    </div>
                </div>
                <!-- 提示 -->
                <div class="tips FONT">扫码后导入手机照片</div>
            </div>
            <!-- 第二步 上传提示 -->
            <!-- <div class="phoneCon" v-if="false">
                <div class="tipsBox">
                    <div class="tip1 FONT">请在手机端选择照片</div>
                    <div class="tip2">
                        <img src="../assets/img/selectTip.png" alt="">
                        <span class="FONT">照片要五官清晰哦~</span>
                    </div>
                </div>
                <div class="photosBtns">
                    <div class="btnBox FONT leftBtn">
                        <div>重新扫码</div>
                    </div>
                    <div class="btnBox FONT leftBtn rightBtn">
                        <div>确&nbsp;&nbsp;&nbsp;&nbsp;定</div>
                    </div>
                </div>
            </div> -->
            <!-- 第三步 上传图片展示 -->
            <div class="showCon" v-if="nowStep == 2">
                <div class="photosBoxTwo">
                    <div class="divs">
                        <img class="finish" :src="faceUrl" alt="">
                    </div>
                </div>
                <div class="photosBtns">
                    <div class="btnBox FONT leftBtn" @click="replayUpload">
                        <div>重新上传</div>
                    </div>
                    <div class="btnBox FONT leftBtn rightBtn" @click="clickSubmit">
                        <div>确&nbsp;&nbsp;&nbsp;&nbsp;定</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 退出确认弹框 -->
        <exitConfirmation :isShow.sync="exitShow" @confirm="confirm"></exitConfirmation>
    </div>
</template>

<script>
import heads from '../components/heads.vue'
import exitConfirmation from '../components/exitConfirmation.vue'
import myLoading from '../components/myLoading.vue'
import QRCode from "qrcode"
import {uploadImageResult,reUpload} from '../server/api'
import {mapMutations} from 'vuex'
export default {
    components:{
        heads,
        exitConfirmation,
        myLoading
    },
    data(){
        return {
            // 任务id
            taskId:'',
            // 退出弹框
            exitShow:false,
            faceUrl:'',

            // 当前步骤
            nowStep:1,
            // 二维码
            qrCode:'',
        }
    },
    methods:{
        ...mapMutations([
            'setCommonData',
            'setGeneratePhoto'
        ]),
        // 点击返回上一步
        clickReturn(){
            this.$router.go(-1);
        },
        // 点击退出
        clickExitBtn(){
            this.exitShow = true;
        },
        // 点击退出确认
        confirm(){
            // 跳转首页
            this.$router.push('/theme')
        },
        // 生成上传图片二维码
        generateQRCode(url) {
            return new Promise((resolve,reject)=>{
                // 生成二维码逻辑(参数指定url文字即可)
                QRCode.toDataURL(url)
                .then(async (qr) => {
                    this.qrCode = qr;
                    resolve(qr)
                })
                .catch((error) => {
                    console.error("生成二维码出错：", error);
                    reject(error)
                });
            })
        },
        // 轮询获取上传图片状态
        uploadStatus(){
            uploadImageResult(this.taskId).then(res=>{
                console.log(res)
                if(res.data.result == true){
                    // 清空定时器
                    clearInterval(this.interval)
                    // this.$router.push('/modeSelect?taskId='+this.taskId)
                    this.nowStep = 2;
                    this.faceUrl = res.data.imageUrl;
                }
            })
        },
        // 点击重新上传
        async replayUpload(){
            await reUpload(this.taskId)
            this.nowStep = 1;
            this.uploadStatus();
            this.interval = setInterval(()=>{
                this.uploadStatus();
            },1500)
        },
        // 重新上传接口调用
        // 点击确定
        clickSubmit(){
            this.setCommonData({
                key:'photograph',
                value:this.faceUrl
            });
            // 跳转生成页面
            this.$router.push('/photograph?taskId='+this.taskId+'&h5Upload=true')
        },
        // // 轮询订单状态
        // pollingState(){
        //     bodyEmitter(this.orderNumber).then(res=>{
        //         console.log(res)
        //         if(res.data.result == true){
        //             // 清空定时器
        //             clearInterval(this.interval)
        //             // 设置支付状态
        //             this.setCommonData({
        //                 key:'paymentStatus',
        //                 value:true,
        //             })
        //             this.$router.push('/modeSelect?taskId='+this.taskId)
        //         }
        //     })
        // },
    },
    async created(){
        console.log(process.env)
        this.taskId = this.$route.query.taskId;
        await this.generateQRCode(process.env.VUE_APP_H5_UPLOAD +'?taskId='+ this.taskId)
        // 轮询
        this.uploadStatus();
        this.interval = setInterval(()=>{
            this.uploadStatus();
        },1500)
    },
    beforeDestroy(){
        clearInterval(this.interval)
    }
}
</script>

<style lang="less" scoped>
.uploadPhotos{
    width: 100%;
    height: 1920px;
    background-image: url('../assets/img/bgImg.png');
    background-size: 100% 1920px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .headss{
        flex: none;
    }
    .exitBtn{
        width: 94px;
        height: 94px;
        position: fixed;
        left: 52px;
        top: 46px;
    }
    .exitBtnTwo{
        width: 94px;
        height: 94px;
        position: fixed;
        right: 52px;
        top: 46px;
    }
    .conlist{
        flex: 1;
        padding: 0  50px  120px 50px;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .stepBox{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 70px;
            .leftStrip{
                width: 150px;
                height: 16px;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 4.33%, #FFDEC0 22.99%, #FFC9EB 53.12%, #B0AEFF 100%);
                border-radius: 8px;
                margin-right: -16px;
            }
            .centerStrip{
                width: 287px;
                height: 16px;
                background: linear-gradient(90deg, #B0AEFF 0%, #FFC9EB 49%, #FFDEC0 100%);
                border-radius: 8px;
                margin-left: -16px;
                margin-right: -16px;
            }
            .rightStrip{
                width: 150px;
                height: 16px;
                background: linear-gradient(90deg, #FFDEC0 4.33%, #B0AEFF 55.99%, #FFC9EB 78.47%, rgba(255, 255, 255, 0) 100%);
                border-radius: 8px;
                margin-left: -16px;
            }
            .scanCodeIcon,.selectIconTwo{
                position: relative;
                z-index: 99;
                img{
                    width: 112px;
                    height: 112px;
                }
                .textCon{
                    min-width: 163px;
                    font-size: 32px;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            .transparent{
                opacity: 0.2;
            }
        }
        .codeCon{
            .codeBox{
                width: 410px;
                height: 410px;
                background-image: url('../assets/img/Rectangle 30399.png');
                background-size: 100% 410px;
                margin: 0 auto;
                margin-top: 106px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px;
                box-sizing: border-box;
                .code{
                    width: 100%;
                    height: 100%;
                    background-color: #fff;
                    border-radius: 12px;
                    overflow: hidden;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .tips{
                width: 100%;
                font-size: 48px;
                text-align: center;
                margin-top: 36px;
            }
        }
        .phoneCon{
            margin-top: 262px;
            transform:translateX(0px) scale(1);
            .tipsBox{
                width: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .tip1{
                    font-size: 48px;
                }
                .tip2{
                    display: flex;
                    align-items: flex-start;
                    margin-top: 26px;
                    img{
                        width: 128px;
                        height: 169px;
                    }
                    span{
                        font-size: 32px;
                        margin-left: 13px;
                    }
                }
            }
            
        }
        .showCon{
            margin-top: 106px;
            transform:translateX(0px) scale(1);
            .photosBoxTwo{
                width: 550px;
                height: 744px;
                background: linear-gradient(180deg, #B0AEFF 0%, #FFC9EB 43.13%, #FFDEC0 100%);
                box-shadow: 8px 10px 10px 0px #03009233;
                box-sizing: border-box;
                border-radius: 4px;
                margin: 0 auto;
                padding: 6px;
                position: relative;
                margin-top: 30px;
                &::after{
                    content:'';
                    display: block;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(180deg, #B0AEFF 0%, #FFC9EB 43.13%, #FFDEC0 100%);
                    position: absolute;
                    border-radius: 4px;
                    left: 0;
                    top: 0;
                    padding: 6px;
                    z-index: -2;
                    box-sizing: border-box;
                    transform: rotate(-6deg);
                    box-shadow: 8px 10px 10px 0px #03009233;
                }
                &::before{
                    content:'';
                    display: block;
                    width: calc(100% - 12px);
                    height: calc(100% - 12px);
                    position: absolute;
                    background-color: #FFFFFF;
                    z-index: -1;
                    left: 6px;
                    top: 6px;
                    transform: rotate(-6deg);
                    border-radius: 4px;
                }
                .divs{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    border-radius: 4px;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit:cover;
                        vertical-align: bottom;
                        border-radius: 4px;
                    }
                }
                .afterBox{
                    width: auto;
                    position: absolute;
                    left: -36%;
                    top: 50%;
                    transform: translateY(-50%);
                    .span{
                        font-size: 64px;
                        transform: rotate(-20deg);
                    }
                    img{
                        width: 140px;
                        height: 166px;
                        margin-top: -20px;
                        margin-left: 100px;
                    }
                }
            }
        }
        .photosBtns{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 127px;
            .leftBtn{
                margin-right: 86px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
            }
            .rightBtn{
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                margin-left: 88px;
            }
            .bths{
                width: 308px;
                height: 94px;
                font-size: 32px;
                text-align: center;
                line-height: 94px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 64px;
                cursor: pointer;
                color: #fff;
                background-color: #7875FC;
                border-radius: 64px;
                box-shadow: 0px 0px 10px 0px #03008A33;
            }
            .btnOne{
                width: 230px;
                height: 106px;
            }
        }
        .btnBox{
            width: 250px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            margin: 0 auto;
            margin-top: 34px;
            cursor: pointer;
            font-size: 32px;
            position: relative;
            &::before{
                content:'';
                display: block;
                background-image: url('../assets/img/commonBtn.png');
                background-size: 100% 80px;
                position: absolute;
                width: 240px;
                height: 80px;
                z-index: -1;
            }
        }
    }
}
</style>